"use client"

import { DependencyList, RefObject, useEffect, useRef } from "react";
/**视口监听器 - 回调函数的类型，参数见ts类型。 */
export type ObserverCallback = (entryData: IntersectionObserverEntry) => void
/**视口监听器 - 观察者模式 */
export class ViewportObserverWatcher {
    /**IntersectionObserver 实例 */
    io: IntersectionObserver
    /**当前正在监听的元素的weakMap */
    watchMap = new WeakMap<Element, Set<ObserverCallback>>()
    constructor(options?: IntersectionObserverInit) {
        this.io = new IntersectionObserver((entries) => {
            entries.forEach((k) => {
                this.watchMap.get(k.target)?.forEach((fn) => fn(k)) //从weakMap中取出对应的监听事件触发
            });
        }, options);
    }
    /**添加对元素的一个监听回调，可以选择触发条件
     * @param target 目标元素
     * @param callback 回调函数
     * @param condition 触发回调条件 `true | false | undefined` 分别对应 `与视口边界交叉 | 不与视口交叉 | 都`
     */
    addWatch = (target: Element, callback: ObserverCallback, condition?: boolean) => {
        const _callback: ObserverCallback = (k) => {
            if (condition == undefined) { }//无论如何都触发 
            else if ((condition !== k.isIntersecting)) return //这一行是对下面这两行的简化。当触发条件和实际情况不相同时，不触发 
            callback(k)
        }
        if (this.watchMap.has(target)) {
            this.watchMap.get(target)!.add(_callback)
        } else {
            this.io.observe(target)
            this.watchMap.set(target, new Set([_callback]))
        }
    }
    /**取消对元素的某个回调 */
    removeWatch = (target: Element, callback: ObserverCallback) => {
        const set = this.watchMap.get(target)
        if (set) {
            set.delete(callback)
            if (set.size === 0) {
                this.watchMap.delete(target)
                this.io.unobserve(target)
            }
        }
    }
    /**取消对该元素的全部回调 */
    cancelWatch = (target: Element) => {
        this.watchMap.delete(target)
        this.io.unobserve(target)
    }
}
/**视口监听器 - 单例模式 */
let viewportObserver: null | ViewportObserverWatcher = null //在NextJS build的时候，不能直接实例化IntersectionObserver，否则会报错 （因为在走服务端代码）


/**懒加载。 基于全局一个单例模式监听器，减少创建实例的性能开销。懒加载触发后，将会取消监听
 * @param watchRef 要监听的DOM元素
 * @param onEntering 元素进入视口的回调函数
 * @param onDestroy useEffect的return中要做的事
 * @param deps useEffect的依赖数组 （当什么变化时，需要重新开始懒加载流程）
 */
const useLazyLoad = (watchRef: RefObject<HTMLElement>, onEntering: ObserverCallback, onDestroy?: () => void, deps: DependencyList = []) => {
    /**是否完成懒加载 */
    const isLazySuccess = useRef(false);
    useEffect(() => {
        if (!watchRef.current) return;
        if (!viewportObserver) viewportObserver = new ViewportObserverWatcher() //这一句话只会触发一次。  
        const callback: ObserverCallback = (k) => {
            //因为只要和视口在交叉，就会不断触发这个函数，故需要使用一个标识符来限制 
            if (isLazySuccess.current === false) {
                onEntering(k)
                isLazySuccess.current = true;
                viewportObserver!.removeWatch(watchRef.current!, callback) //加载完成就取消监听 
            }
        }
        viewportObserver.addWatch(watchRef.current, callback, true)
        return () => {
            if (watchRef.current && viewportObserver) viewportObserver.removeWatch(watchRef.current, callback); //卸载时也要取消监听 
            isLazySuccess.current = false;
            onDestroy && onDestroy()
        };
    }, deps)
}

export default useLazyLoad